<template>
  <div style="padding:5px 20px;">
    <Row :gutter="20">
      <i-col :lg="6" :xs="24" :sm="12" :md="12">
        <Card style="width:100%">
          <template #title>
              访问量
          </template>
          <template #extra>
              <Tag color="success">日</Tag>
          </template>
          <NumberInfo sub-title="近7日访问量" sub-total="17.1" status="up">
            <template #title>
              <span style="font-size:30px;">26758</span>
            </template>
            <template #total>
                <Numeral value="12321" format="0,0" />
            </template>
          </NumberInfo>
          <Divider style="margin: 8px 0px;"></Divider>
          <Row>
            <i-col :lg="12">
              总访问量
            </i-col>
            <i-col :lg="12" style="text-align:right">
              300万
            </i-col>
          </Row>
        </Card>
      </i-col>
      <i-col :lg="6" :xs="24" :sm="12" :md="12">
        <Card style="width:100%">
          <template #title>
              销售量
          </template>
          <template #extra>
              <Tag color="primary">周</Tag>
          </template>
          <NumberInfo sub-title="近7日访问量" sub-total="17.1" status="up">
            <template #title>
              <span style="font-size:30px;">26758</span>
            </template>
            <template #total>
                <Numeral value="12321" format="0,0" />
            </template>
          </NumberInfo>
          <Divider style="margin: 8px 0px;"></Divider>
          <Row>
            <i-col :lg="12">
              总销售量
            </i-col>
            <i-col :lg="12" style="text-align:right">
              300万
            </i-col>
          </Row>
        </Card>
      </i-col>
      <i-col :lg="6" :xs="24" :sm="12" :md="12">
        <Card style="width:100%">
          <template #title>
              订单量
          </template>
          <template #extra>
              <Tag color="red">月</Tag>
          </template>
          <NumberInfo sub-title="近7日访问量" sub-total="17.1" status="up">
            <template #title>
              <span style="font-size:30px;">26758</span>
            </template>
            <template #total>
                <Numeral value="12321" format="0,0" />
            </template>
          </NumberInfo>
          <Divider style="margin: 8px 0px;"></Divider>
          <Row>
            <i-col :lg="12">
              总订单量
            </i-col>
            <i-col :lg="12" style="text-align:right">
              300万
            </i-col>
          </Row>
        </Card>
      </i-col>
      <i-col :lg="6" :xs="24" :sm="12" :md="12">
        <Card style="width:100%">
          <template #title>
              新增用户数
          </template>
          <template #extra>
              <Tag color="success">年</Tag>
          </template>
          <NumberInfo sub-title="近7日访问量" sub-total="17.1" status="up">
            <template #title>
              <span style="font-size:30px;">26758</span>
            </template>
            <template #total>
                <Numeral value="12321" format="0,0" />
            </template>
          </NumberInfo>
          <Divider style="margin: 8px 0px;"></Divider>
          <Row>
            <i-col :lg="12">
              总用户数
            </i-col>
            <i-col :lg="12" style="text-align:right">
              300万
            </i-col>
          </Row>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top:10px;">
      <i-col :lg="3" v-for="item in operationList" :key="item.title">
        <Card style="text-align:center">
          <Icon :type="item.icon" size="32" :color="item.color"></Icon>
          <div style="margin-top: 8px;">{{item.title}}</div>
        </Card>
      </i-col>
    </Row>
    <Card class="card" style="margin-top:10px;">
      <template #title>
          <Avatar icon="ios-pulse" size="24" :style="{'color': 'rgb(24, 144, 255)','background-color': 'rgb(230, 247, 255)'}"></Avatar>  APP 活跃用户年龄分布
      </template>
      <template #extra>
        <RadioGroup v-model="button2" type="button">
          <Radio label="今日"></Radio>
          <Radio label="本月"></Radio>
          <Radio label="全年"></Radio>
        </RadioGroup>
         <DatePicker :model-value="['2022-07-08','2022-07-25']" type="daterange" split-panels placeholder="Select date" style="width: 200px;margin-left:5px;"></DatePicker>
      </template>
      <AppChart></AppChart>
    </Card>
  </div>
</template>

<script>
import AppChart from '@/components/chart-g2/app-chart.vue'
export default {
  name: 'Demo',
  components: {
    AppChart
  },
  data () {
    return {
      operationList:[
        {
          'title':'用户',
          'icon':'md-people',
          'color':'rgb(105, 192, 255)'
        },
        {
          'title':'分析',
          'icon':'md-trending-up',
          'color':'rgb(149, 222, 100)'
        },
        {
          'title':'商品',
          'icon':'md-cart',
          'color':'rgb(255, 156, 110)'
        },
        {
          'title':'订单',
          'icon':'md-clipboard',
          'color':'rgb(179, 127, 235)'
        },
        {
          'title':'票据',
          'icon':'md-card',
          'color':'rgb(255, 214, 102)'
        },
        {
          'title':'消息',
          'icon':'md-mail',
          'color':'rgb(92, 219, 211)'
        },
        {
          'title':'标签',
          'icon':'md-pricetags',
          'color':'rgb(255, 133, 192)'
        },
        {
          'title':'配置',
          'icon':'md-switch',
          'color':'rgb(255, 192, 105)'
        }
      ],
      button2:''
    }
  },
  setup() {
  },
  methods: {
    handleClick() {
      this.$Message.info('Welcome to View UI Plus Demo!')
    }
  }
}
</script>
<style scoped>

</style>

